import styles from "./Group.scss";

import React from "react";
import { Option } from "../../MultiCheck";
import Checkbox from "./Checkbox";

interface CheckboxGroupProps {
  options: Option[];
  values: Array<string>;
  onChange?: (option: Option) => void;
  className?: string;
}

const CheckboxGroup: React.FunctionComponent<CheckboxGroupProps> = ({
  onChange,
  options,
  values,
  children,
}): JSX.Element => {
  const boxes = options.map(({ value }) => {
    return (
      <Checkbox
        key={value}
        name={value}
        value={value}
        checked={values?.indexOf(value) > -1}
        onChange={onChange}
      />
    );
  });

  return (
    <div className={styles.CheckboxGroup}>
      {children}
      {boxes}
    </div>
  );
};

export default CheckboxGroup;
